<html>
<head>
    <meta charset="utf-8">
    <title>冰激凌家园</title>
    <link rel="stylesheet" href="css/layui.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/common.css">
    <style>[v-cloak]{display: none;}</style>
    <script src="js/vant.min.js"></script>
</head>
<body>
<div id="app" v-cloak>
    <div class="err_box layui-container" id="errBox" v-show="tipsIf" :style="{top:errorTop+'px'}">{{tipsMsg}}</div>
    <!--<header class="bg_head">
        <div class="layui-container disFlex">
           <div class="aside">
               <img src="images/logo.png" alt="logo" class="logo">
           </div>
            <ul class="disFlex head_nav">
                <li v-for="(a,i) in headNav" :class="{on:headOn==i}" @click="headBtn(i)">{{a.item}}</li>
            </ul>
             <div :class="{user:true,login:is_login}" >
                 <template v-if="is_login">
                     <span @click="loginBtn(1)">登陆</span><span @click="loginBtn(2)">注册</span>
                 </template>
                 <template v-if="!is_login">
                     <img src="images/user.png" class="icon_user" alt=""> 个人中心
                     <div class="sub_menu">
                         <div class="sub_mit">
                             18080153573
                             <p>积分：3500</p>
                         </div>
                         <ul>
                             <li @click="go_user(0)">我的订单</li>
                             <li @click="go_user(1)">修改密码</li>
                             <li @click="go_user(2)">入网资料管理</li>
                             <li @click="go_user(3)">收获地址管理</li>
                         </ul>
                         <div class="login_out">
                             退出登陆
                         </div>
                     </div>
                 </template>
             </div>
        </div>
    </header>-->
    <xhhead on="0" v-on:login="loginMsgPop"></xhhead>
    <Login v-show="login_if" :login_type="login_num" v-on:close="login_close" v-on:tip="son_tip" ></Login>
    <div class="layui-container mt20 no_pad">
        <div class="aside  quick_box">
            <ul class="bg_red" @click="quickNumber">
               <li class="aside-head">快捷选号</li>
                <li><img src="images/icon_yd.png" class="brand" alt="">移动手机选号</li>
                <li><img src="images/icon_dx.png" class="brand" alt="">电信手机选号</li>
                <li><img src="images/icon_lt.png" class="brand" alt="">联通手机选号</li>
                <li><img src="images/icon_xn.png" class="brand" alt="">虚拟运营商选号</li>
                <li><img src="images/icon_yd.png" class="brand" alt="">移动座机选号</li>
                <li><img src="images/icon_dx.png" class="brand" alt="">电信座机选号</li>
                <li><img src="images/icon_lt.png" class="brand" alt="">联通座机选号</li>
            </ul>
            <div class="bg_red aside-fn"><img src="images/server.png" class="icon server_icon" alt="">微信客服</div>
            <div class="bg_red aside-fn"><img src="images/phone.png" class="icon icon-phone" alt="">咨询电话</div>
        </div>
        <!--快速选号-->
        <div class="phone_condition" v-show="numContentType==1">
            <div>
                <div class="label">按位搜索</div> 
                <div class="phone option">
                    <input type="text"><input type="text"><input type="text">&nbsp;&nbsp;&nbsp;--&nbsp;
                    <input type="text"><input type="text"><input type="text"><input type="text">&nbsp;&nbsp;&nbsp;--&nbsp;
                    <input type="text"><input type="text"><input type="text"><input type="text">
                    <span class="search-btn"><img src="images/search.png" class="icon search" alt=""></span>
                </div>
            </div>
            <div>
                <div class="label">模糊搜索</div>
                <div  class="option">
                    <input type="text" class="fuzzy_input"><span class="search-btn"><img src="images/search.png" class="icon search" alt=""></span>
                </div>
            </div>
            <div>
                <div class="label">归属地</div>
                <div  class="option top">
                    <span v-for="(a,i) in area" @click="areaBtn(i)" :class="{on:a.if}">{{a.item}}</span>
                </div>
            </div>
            <div>
                <div class="label">号段</div>
                <div  class="option top">
                    <span v-for="(a,i) in phoneList" @click="phoneBtn(i)" :class="{on:a.if}">{{a.item}}</span>
                </div>
            </div>
            <div>
                <div class="label">号码价格</div>
                <div  class="option top">
                    <span v-for="(a,i) in priceList" @click="priceBtn(i)" :class="{on:a.if}">{{a.item}}</span>
                </div>
            </div>
            <div>
                <div class="label">中间规律</div>
                <div  class="option top">
                    <span v-for="(a,i) in middleRule" @click="mRuleBtn(i)" :class="{on:a.if}">{{a.item}}</span>
                </div>
            </div>
            <div>
                <div class="label">位数规律</div>
                <div  class="option top">
                    <span v-for="(a,i) in numRule" @click="nRuleBtn(i)" :class="{on:a.if}">{{a.item}}</span>
                </div>
            </div>
            <div>
                <div class="label">数字属性</div>
                <div  class="option top">
                    <span v-for="(a,i) in numProp" @click="nPropBtn(i)" :class="{on:a.if}">{{a.item}}</span>
                </div>
            </div>
            <div>
                <div class="label">生日号码</div>
                <div  class="option top">
                    <span v-for="(a,i) in birthNum" @click="birthBtn(i)" :class="{on:a.if}">{{a.item}}</span>
                </div>
            </div>
            <div>
                <div class="label">吉祥号码</div>
                <div  class="option top">
                    <span v-for="(a,i) in luckyNum" @click="luckyBtn(i)" :class="{on:a.if}">{{a.item}}</span>
                </div>
            </div>
            <div class="condition_ready">
                <div class="label">已选条件</div>
                <div class="option">
                    <span v-for="(a,i) in readyList">{{a.item}}</span>
                </div>
            </div>
        </div>
        <!--end of 快速选号-->
        <!--移动选号-->
        <div class="phone_agent" v-show="numContentType==2">
            <ul class="phone_num">
                <li><div>归属地</div><div>号码</div><div>价格</div></li>
                <li><div>归属地</div><div>号码</div><div>价格</div></li>
                <li><div>归属地</div><div>号码</div><div>价格</div></li>
            </ul>
            <ul class="phone_content">
                <li class="phone_box" v-for="index of 60" :key="index" >
                    <div class="phone_item1">
                        <div>成都</div>
                        <div class="number_span"><span>139</span><span>1010</span><span>2959</span></div>
                        <div>￥500</div>
                    </div>
                    <div class="phone_item2">
                        <div class="num_span"><span>139</span><span>1010</span><span>2595</span></div>
                        <div class="appoint_order" @click="goDetail">预约/查看详情</div>
                    </div>
                </li>

            </ul>

        </div>
        <!--end of 移动选号-->
    </div>
    <!--快速选号-->
    <div v-show="numContentType==1">
        <!--号码区域-->
        <div class="mt30 layui-container no_pad number_box bg_ff">
            <div class="container_head">
                <ul class="disFlex">
                    <li v-for="(a,i) in numberHead" :class="{on:a.if}" @click="numberHeadBtn(i)">{{a.item}}</li>
                </ul>
            </div>
            <div class="number_content" v-show="numberHead[0].if" >
                <div v-for="index of 40" :key="index">
                    <div class="number_span">
                        <span>139</span> <span>1010</span> <span>2959</span>
                    </div>
                    <div class="number_show">
                        <div class="number_info">
                            <span>成都</span><span>移动</span>
                        </div>
                        <div class="number_free"><span>&yen;100</span> （含话费40元）</div>
                    </div>
                    <div class="see_number" @click="goDetail">
                        <span>预约/查看详情</span>
                    </div>
                </div>
            </div>
            <div class="number_content" v-show="numberHead[1].if" >
                <div v-for="index of 30" :key="index">
                    <div class="number_span">
                        <span>139</span> <span>1010</span> <span>2959</span>
                    </div>
                    <div class="number_show">
                        <div class="number_info">
                            <span>成都</span><span>移动</span>
                        </div>
                        <div class="number_free"><span>&yen;100</span> （含话费40元）</div>
                    </div>
                    <div class="see_number" @click="goDetail">
                        <span>预约/查看详情</span>
                    </div>
                </div>
            </div>
            <div class="number_content" v-show="numberHead[2].if" >
                <div v-for="index of 42" :key="index">
                    <div class="number_span">
                        <span>139</span> <span>1010</span> <span>2959</span>
                    </div>
                    <div class="number_show">
                        <div class="number_info">
                            <span>成都</span><span>移动</span>
                        </div>
                        <div class="number_free"><span>&yen;100</span> （含话费40元）</div>
                    </div>
                    <div class="see_number" @click="goDetail">
                        <span>预约/查看详情</span>
                    </div>
                </div>
            </div>
        </div>
        <!--end of 号码区域-->
        <!-- 页面分页-->
        <div class="page_box layui-container no_pad">
            <van-pagination
                    v-model="currentPage"
                    :total-items="124" force-ellipses
                    :items-per-page="10" @change="pageChange"
            ></van-pagination>
        </div>
        <!-- end of 页面分页-->
    </div>
    <!--end of 快速选号-->

    <!--登录弹窗-->
    <Login v-on:tip="tipsShow" loginType="1" v-on:close="closeLogin" v-show="loginIf"></Login>
    <!--分割栏-->
    <xhfooter></xhfooter>

</div>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/vue.min.js"></script>
<script src="js/vant.min.js"></script>
<script src="js/components.js"></script>
<script src="foot.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            tipsMsg:"提示信息",
            tipsIf:false,
            errorTop:0,
            login_if:false,
            login_num:1,
            headOn:0,
            loginIf:false,//用户弹窗 是否显示
            is_login:false,//用户是否登陆
            loginType:1,
            headNav:[{item:"移动选号"},{item:"电信选号"},{item:"联通选号"},{item:"虚拟运营商选号"},{item:"座机选号"}],
            area:[{item:"全部",if:false},{item:"成都",if:false},{item:"德阳",if:false},{item:"绵阳",if:false},{item:"眉山",if:false},{item:"乐山",if:false},{item:"广元",if:false},{item:"资阳",if:false}],
            phoneList:[{item:"全部",if:true},{item:"139",if:false},{item:"138",if:false},{item:"136",if:false},{item:"134",if:false},{item:"188",if:false},{item:"183",if:false},{item:"183",if:false}
                ,{item:"159",if:false},{item:"157",if:false},{item:"152",if:false},{item:"150",if:false},{item:"140",if:false},{item:"183",if:false},{item:"184",if:false}],
            priceList:[{item:"全部",if:true},{item:"200~400元",if:false},{item:"400~600元",if:false},{item:"600~1000元",if:false},{item:"1000元+",if:false}],
            middleRule:[{item:"全部",if:true},{item:"AAAA",if:false},{item:"AAAB",if:false},{item:"BAAA",if:false},{item:"ABAB",if:false},{item:"ABCD",if:false}],
            numRule:[{item:"全部",if:true},{item:"5同",if:false},{item:"4同",if:false},{item:"3同",if:false},{item:"AABBB",if:false},{item:"AAAAB",if:false},{item:"2同",if:false},
                {item:"AABBCC",if:false},{item:"AABB",if:false},{item:"AABBB",if:false},{item:"AAAAB",if:false}],
            numProp:[{item:"全部",if:true},{item:"数字9多",if:false},{item:"数字8多",if:false},{item:"数字7多",if:false},{item:"数字6多",if:false},{item:"数字5多",if:false},{item:"数字4多",if:false},
                {item:"数字3多",if:false},{item:"数字2多",if:false},{item:"数字1多",if:false},{item:"数字0多",if:false}],
            birthNum:[{item:"全部",if:true},{item:"一月",if:false},{item:"二月",if:false},{item:"三月",if:false},{item:"四月",if:false},{item:"五月",if:false},{item:"六月",if:false},{item:"七月",if:false},
                {item:"八月",if:false},{item:"九月",if:false},{item:"十月",if:false},{item:"十一月",if:false},{item:"十二月",if:false}],
            luckyNum:[{item:"全部",if:true},{item:"努力发达",if:false},{item:"大展鸿图",if:false},{item:"万物回春",if:false},{item:"万宝集门",if:false},{item:"此数大吉",if:false},
                {item:"阴阳和合",if:false},{item:"锦绣前程",if:false},{item:"天赋吉运",if:false},{item:"美化丰实",if:false},{item:"经商做事",if:false},{item:"池中之龙",if:false},{item:"杨柳遇春",if:false}],
            readyList:[],
            numberHead:[{item:"综合排序",if:true},{item:"号码排序",if:false},{item:"价格排序",if:false}],
            currentPage:10,
            numContentType:1,
            detailIf:false,
        },
        methods:{
            go_user:function (i) {
              location.href="user_order.html?type="+i
            },
            //展开登录弹窗
            loginBtn:function(i){ this.loginType=i;this.loginIf=true;console.log("type",i) },
            closeLogin:function (data) {this.loginIf=data; },
            goDetail:function () {
              location.href="detail.html"
            },
            tipsShow:function (data) {
                console.log("son msg",data);
                this.tipsMsg=data.msg;
                this.tipsIf=true;
                var that = this;
                that.errorTop=-40;
                setInterval(function () {
                    that.errorTop=that.errorTop<0?(that.errorTop+2):0;
                },10)
                setTimeout(function () {
                    that.tipsIf=false;
                },2000)
            },
            headBtn:function (i) {
                this.headOn=i
                this.numContentType=1;
            },
            quickNumber:function () {
                this.numContentType=2;
            },
            areaBtn:function (i) {
                this.area.forEach(function (value) {  value.if=false });
                this.area[i].if=true;
                this.getReady();
            },
            phoneBtn:function (i) {
                this.phoneList.forEach(function (value) {  value.if=false });
                this.phoneList[i].if=true;
                this.getReady();
            },
            priceBtn:function (i) {
                this.priceList.forEach(function (value) {  value.if=false });
                this.priceList[i].if=true;
                this.getReady();
            },
            mRuleBtn:function (i) {
                this.middleRule.forEach(function (value) {  value.if=false });
                this.middleRule[i].if=true;
                this.getReady();
            },
            nRuleBtn:function (i) {
                this.numRule.forEach(function (value) {  value.if=false });
                this.numRule[i].if=true;
                this.getReady();
            },
            nPropBtn:function (i) {
                this.numProp.forEach(function (value) {  value.if=false });
                this.numProp[i].if=true;
                this.getReady();
            },
            birthBtn:function (i) {
                this.birthNum.forEach(function (value) {  value.if=false });
                this.birthNum[i].if=true;
                this.getReady();
            },
            luckyBtn:function (i) {
                this.luckyNum.forEach(function (value) {  value.if=false })
                this.luckyNum[i].if=true;
                this.getReady();
            },
            //页面筛选条件显示
            getReady:function () {
                var that=this;
                this.readyList=[];
                this.area.map(function (value) {
                    if(value.if&&value.item!=="全部"){
                            var obj={item:value.item,symbol:"area"};
                            that.readyList.push(obj)
                    }
                })
                this.phoneList.map(function (value) {
                    if(value.if&&value.item!=="全部"){
                        var obj={item:value.item,symbol:"phone"};
                        that.readyList.push(obj)
                    }
                })
                this.priceList.map(function (value) {
                    if(value.if&&value.item!=="全部"){
                        var obj={item:value.item,symbol:"price"};
                        that.readyList.push(obj)
                    }
                })
                this.middleRule.map(function (value) {
                    if(value.if&&value.item!=="全部"){
                        var obj={item:value.item,symbol:"middle_rule"};
                        that.readyList.push(obj)
                    }
                })

                this.numRule.map(function (value) {
                    if(value.if&&value.item!=="全部"){
                        var obj={item:value.item,symbol:"num_rule"};
                        that.readyList.push(obj)
                    }
                })
                this.numProp.map(function (value) {
                    if(value.if&&value.item!=="全部"){
                        var obj={item:value.item,symbol:"num_prop"};
                        that.readyList.push(obj)
                    }
                })
                this.birthNum.map(function (value) {
                    if(value.if&&value.item!=="全部"){
                        var obj={item:value.item,symbol:"birth_num"};
                        that.readyList.push(obj)
                    }
                })
                this.luckyNum.map(function (value) {
                    if(value.if&&value.item!=="全部"){
                        var obj={item:value.item,symbol:"lucky_num"};
                        that.readyList.push(obj)
                    }
                })
            },
            numberHeadBtn:function (i) {
                this.numberHead.forEach(function (value) { value.if=false })
                this.numberHead[i].if=true;
            },
            //页面显示改变
            pageChange:function (i) {
                console.log("page",i)
            },
            //登陆弹窗
            loginMsgPop:function(data){ this.login_if=true,this.login_num=data;},
            login_close:function(data){this.login_if=data},
            //提示子组件错误信息
            son_tip:function (data) {this.tips_show(data.msg)},
            //提示错误信息
            tips_show:function (msg) {
                this.tipsMsg=msg;this.tipsIf=true;
                var that = this;that.errorTop=-40;
                var msgInter=setInterval(function () {
                    that.errorTop=that.errorTop<0?(that.errorTop+2):0;
                    if(that.errorTop>0){clearInterval(msgInter)}
                },10)
                setTimeout(function () {that.tipsIf=false;},2000)
            },
        },
        created:function () {
            
        },
        mounted:function () {
            
        }
    })
</script>
</body>
</html>